import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:yp/config/index.dart';
import 'package:yp/router.dart';
import 'package:yp/widgets/bottom_sheet.dart';
import 'package:yp/widgets/button_widget.dart';
import 'package:yp/widgets/dialog.dart';
import 'package:yp/widgets/index.dart';
import 'package:yp/widgets/shop.dart';
import 'package:yp/widgets/switch.dart';

/// 填写订单
class SettleAccounts extends StatefulWidget {
  const SettleAccounts({Key key}) : super(key: key);

  @override
  _SettleAccountsState createState() => _SettleAccountsState();
}

class _SettleAccountsState extends State<SettleAccounts>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  /// eg 提货switch 按钮
  bool _switchTest = true;

  /// 有无联系人
  bool _addConsignee = false;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this);
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: YPNavigationBar('填写订单'),
      body: _body(),
      // backgroundColor: EsColors.White,
    );
  }

  /// body部分
  Widget _body() {
    return Stack(
      children: [
        Padding(
          padding: EdgeInsets.only(
              bottom: 55 + MediaQuery.of(context).padding.bottom),
          child: CustomScrollView(
            slivers: [
              SliverToBoxAdapter(
                child: Container(
                  color: EsColors.White,
                  child: Column(
                    children: [
                      _addConsignee ? _headerAdderss() : _addConsigneeInfo(),
                      YpLine(),
                      _pickUp(),
                      _goodsInfo(),
                      YpLine(
                          height: 20,
                          thickness: 20,
                          color: EsColors.BackGroundSecondary),
                      _preference(),
                      YpLine(
                          height: 20,
                          thickness: 20,
                          color: EsColors.BackGroundSecondary),
                      _amount(),
                      SizedBox(height: 10)
                    ],
                  ),
                ),
              )
            ],
          ),
        ),
        Positioned(bottom: 0, left: 0, right: 0, child: _bottom())
      ],
    );
  }

  /// 一个带开关的小条目
  Widget _switchitem(Widget text, bool status, Function func) {
    return Row(children: [
      text,
      SizedBox(width: 12),
      EsSwitch(status: status, onChanged: func),
    ]);
  }

  /// header部分
  /// header部分-地址
  Widget _headerAdderss() {
    return Container(
      color: EsColors.BackGroundSecondary,
      padding: const EdgeInsets.fromLTRB(12, 12, 12, 8),
      child: GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: () {
          print('选择地址');
        },
        child: Row(
          children: [
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  SizedBox(height: 8),
                  Row(
                    children: [
                      Container(
                        constraints: BoxConstraints(
                            maxWidth: MediaQuery.of(context).size.width / 3),
                        child: Text(
                          '大鹅',
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                              color: EsColors.TitleSecondary,
                              fontSize: EsSizes.MD,
                              fontWeight: EsFontWeights.Medium),
                        ),
                      ),
                      SizedBox(width: 12),
                      Expanded(
                        child: Text(
                          '128****3321',
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                              color: EsColors.TitleSecondary,
                              fontSize: EsSizes.MD,
                              fontWeight: EsFontWeights.Medium),
                        ),
                      ),
                    ],
                  ),
                  SizedBox(height: 6),
                  Text(
                    '江苏省 苏州市 昆山市 花桥镇 绿地大道211号 启航城晶彩小区 36号402室',
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                        color: EsColors.TitleSecondary,
                        fontSize: EsSizes.SM,
                        fontWeight: EsFontWeights.Normal),
                  ),
                  SizedBox(height: 4),
                  Visibility(
                    visible: _switchTest,
                    child: Text(
                      '您已经选择自提，商品到达自提点后凭借提货码提货',
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                          color: EsColors.Pink,
                          fontSize: EsSizes.XS,
                          fontWeight: EsFontWeights.Normal),
                    ),
                  ),
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 12),
              child: Icon(
                Icons.arrow_forward_ios,
                size: EsSizes.MD,
                color: EsColors.ContentSecondary,
              ),
            )
          ],
        ),
      ),
    );
  }

  /// 添加收货人信息
  Widget _addConsigneeInfo() {
    return Container(
      color: EsColors.BackGroundSecondary,
      padding: const EdgeInsets.only(top: 16, bottom: 16),
      alignment: Alignment.center,
      child: OutlinedButton(
          onPressed: () {
            print('添加收货人信息');
            Get.toNamed(RouteConfig.addressList);
            setState(() {
              _addConsignee = true;
            });
          },
          style: OutlinedButton.styleFrom(
            padding: EdgeInsets.fromLTRB(15, 6, 15, 6),
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(30)),
            side:
                BorderSide(color: EsColors.Primary.withOpacity(0.5), width: 1),
          ),
          child: Text(
            '点击添加收货人信息',
            style: TextStyle(
                color: EsColors.Primary,
                fontSize: EsSizes.MD,
                fontWeight: EsFontWeights.Normal),
          )),
    );
  }

  /// header部分-自提
  Widget _pickUp() {
    return Container(
      color: EsColors.BackGroundSecondary,
      padding: const EdgeInsets.fromLTRB(12, 8, 12, 10),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          _switchitem(
              Expanded(
                child: Text(
                  '您可以选择附近的自提点去提货',
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                      color: EsColors.Content,
                      fontSize: EsSizes.SM,
                      fontWeight: EsFontWeights.Normal),
                ),
              ),
              _switchTest, (bool value) {
            setState(() {
              _switchTest = !_switchTest;
            });
            print('点击提货开关：${_switchTest ? '开' : '关'}');
          }),
          Visibility(
            visible: _switchTest,
            child: Padding(
              padding: const EdgeInsets.only(bottom: 12),
              child: Row(
                children: [
                  Expanded(
                    child: Text(
                      '河南省 郑州市 管城回族自治区商鼎路龙宇国际12号楼1201室',
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                          color: EsColors.TitleSecondary,
                          fontSize: EsSizes.SM,
                          fontWeight: EsFontWeights.Normal),
                    ),
                  ),
                  SizedBox(width: 12),
                  EsOutLineButton(
                    '修改',
                    normal: true,
                    textColor: EsColors.ContentSecondary,
                    padding: EdgeInsets.symmetric(vertical: 4, horizontal: 12),
                    onTap: () {
                      print('修改自提货点');
                      YpShowDialog.showPickUpStation(context, [
                        {'isSelect': false, 'name': '农业南路进水营业厅'},
                        {'isSelect': true, 'name': ''},
                        {'isSelect': false, 'name': '农业南路进水营业厅'},
                        {'isSelect': true, 'name': '农业南路进水营业厅'},
                        {'isSelect': false, 'name': ''}
                      ], (index, text, {info}) {
                        print(index);
                        print(text);
                      });
                    },
                  )
                ],
              ),
            ),
          ),

          /// 彩线
          Visibility(
              visible: _switchTest, child: YpLine(height: 4, thickness: 4)),
        ],
      ),
    );
  }

  /// 商品信息部分
  Widget _goodsInfo() {
    return Column(
      children: [
        ShopName('陆家嘴尚悦湾总店(营业中)'),
        YpLine(indent: 12),
        GestureDetector(
          behavior: HitTestBehavior.opaque,
          onTap: () {
            print('修改配送时间');
          },
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: 14, horizontal: 12),
            child: Row(
              children: [
                Text(
                  '配送时间',
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                      color: EsColors.Content,
                      fontSize: EsSizes.SM,
                      fontWeight: EsFontWeights.Normal),
                ),
                Expanded(
                  child: Text(
                    '2021-09-02 12:00-13:00',
                    textAlign: TextAlign.end,
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                        color: EsColors.Primary,
                        fontSize: EsSizes.SM,
                        fontWeight: EsFontWeights.Normal),
                  ),
                ),
                SizedBox(width: 12),
                Icon(
                  Icons.arrow_forward_ios,
                  size: EsSizes.MD,
                  color: EsColors.ContentSecondary,
                )
              ],
            ),
          ),
        ),
        YpLine(indent: 12),
        GestureDetector(
          behavior: HitTestBehavior.opaque,
          onTap: () {
            print('查看结算列表');
            Get.toNamed(RouteConfig.settleList);
          },
          child: Container(
            margin: const EdgeInsets.symmetric(vertical: 16, horizontal: 12),
            child: Row(
              children: [
                Expanded(
                    child: Wrap(
                  spacing: 6,
                  children: List.generate(
                      3,
                      (index) => CachedImage(
                            width: MediaQuery.of(context).size.width / 7,
                            height: MediaQuery.of(context).size.width / 7,
                            path:
                                'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.suning.cn%2Fuimg%2FZR%2Fshare_order%2F157608579594148386.jpg&refer=http%3A%2F%2Fimage.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633167113&t=7442d5f83caf601e74c3b7b3d48e2a04',
                            border: Border.all(
                                color: EsColors.BackGroundSecondary, width: 1),
                          )),
                )),
                SizedBox(width: 8),
                Text(
                  '共5件',
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                      color: EsColors.ContentSecondary,
                      fontSize: EsSizes.SM,
                      fontWeight: EsFontWeights.Normal),
                ),
                SizedBox(width: 8),
                Icon(
                  Icons.arrow_forward_ios,
                  size: EsSizes.MD,
                  color: EsColors.ContentSecondary,
                )
              ],
            ),
          ),
        )
      ],
    );
  }

  /// 优惠部分
  Widget _preference() {
    return Column(
      children: [
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 12),
          child: Row(
            children: [
              Text(
                '使用优惠券',
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
                style: TextStyle(
                    color: EsColors.Content,
                    fontSize: EsSizes.SM,
                    fontWeight: EsFontWeights.Normal),
              ),
              Expanded(
                child: Text(
                  '您可以选择附近的自提点去提货',
                  textAlign: TextAlign.end,
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                      color: EsColors.Content,
                      fontSize: EsSizes.SM,
                      fontWeight: EsFontWeights.Normal),
                ),
              ),
            ],
          ),
        ),
        YpLine(),
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 5),
          child: _switchitem(
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.only(left: 12),
                  child: RichText(
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    text: TextSpan(
                        text: '使用',
                        style: TextStyle(
                            fontSize: EsSizes.SM,
                            color: EsColors.Content,
                            fontWeight: EsFontWeights.Normal),
                        children: <TextSpan>[
                          TextSpan(
                              text: '2000',
                              style: TextStyle(
                                  fontSize: EsSizes.SM,
                                  color: EsColors.TitleSecondary,
                                  fontWeight: EsFontWeights.Medium)),
                          TextSpan(
                              text: '鲸币抵扣',
                              style: TextStyle(
                                  fontSize: EsSizes.SM,
                                  color: EsColors.Content,
                                  fontWeight: EsFontWeights.Normal)),
                          TextSpan(
                              text: '￥20',
                              style: TextStyle(
                                  fontSize: EsSizes.SM,
                                  color: EsColors.TitleSecondary,
                                  fontWeight: EsFontWeights.Medium)),
                        ]),
                  ),
                ),
              ),
              true, (bool value) {
            print('点击使用鲸币');
          }),
        ),
        YpLine(),
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 5),
          child: _switchitem(
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.only(left: 12),
                  child: RichText(
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    text: TextSpan(
                        text: '使用',
                        style: TextStyle(
                            fontSize: EsSizes.SM,
                            color: EsColors.Content,
                            fontWeight: EsFontWeights.Normal),
                        children: <TextSpan>[
                          TextSpan(
                              text: '473',
                              style: TextStyle(
                                  fontSize: EsSizes.SM,
                                  color: EsColors.TitleSecondary,
                                  fontWeight: EsFontWeights.Medium)),
                          TextSpan(
                              text: '积分抵扣',
                              style: TextStyle(
                                  fontSize: EsSizes.SM,
                                  color: EsColors.Content,
                                  fontWeight: EsFontWeights.Normal)),
                          TextSpan(
                              text: '￥4.73',
                              style: TextStyle(
                                  fontSize: EsSizes.SM,
                                  color: EsColors.TitleSecondary,
                                  fontWeight: EsFontWeights.Medium)),
                        ]),
                  ),
                ),
              ),
              false, (bool value) {
            print('点击使用积分');
          }),
        ),
        YpLine(),
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 5),
          child: _switchitem(
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.only(left: 12),
                  child: RichText(
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    text: TextSpan(
                        text: '使用电子钱包支付(',
                        style: TextStyle(
                            fontSize: EsSizes.SM,
                            color: EsColors.Content,
                            fontWeight: EsFontWeights.Normal),
                        children: <TextSpan>[
                          TextSpan(
                              text: '￥999.99',
                              style: TextStyle(
                                  fontSize: EsSizes.SM,
                                  color: EsColors.TitleSecondary,
                                  fontWeight: EsFontWeights.Medium)),
                          TextSpan(
                              text: ')',
                              style: TextStyle(
                                  fontSize: EsSizes.SM,
                                  color: EsColors.Content,
                                  fontWeight: EsFontWeights.Normal)),
                        ]),
                  ),
                ),
              ),
              false, (bool value) {
            print('点击使用电子钱包支付');
          }),
        ),
        YpLine(),
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 12),
          child: Row(
            children: [
              Text(
                '如遇缺货：',
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
                style: TextStyle(
                    color: EsColors.Content,
                    fontSize: EsSizes.SM,
                    fontWeight: EsFontWeights.Normal),
              ),
              Expanded(
                child: Text(
                  '缺货商品退款，其他商品及需配送',
                  textAlign: TextAlign.end,
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                      color: EsColors.Content,
                      fontSize: EsSizes.SM,
                      fontWeight: EsFontWeights.Normal),
                ),
              ),
              Icon(
                Icons.arrow_forward_ios,
                size: EsSizes.MD,
                color: EsColors.ContentSecondary,
              )
            ],
          ),
        ),
        Padding(
          padding: const EdgeInsets.only(left: 12, right: 12),
          child: TextField(
            onTap: () {
              print('输入订单备注');
            },
            style: TextStyle(
              fontSize: EsSizes.SM,
              color: EsColors.TitleSecondary,
            ),
            cursorColor: EsColors.Content,
            decoration: InputDecoration(hintText: '订单备注（30字以内）'),
          ),
        ),
        SizedBox(
          height: 20,
        )
      ],
    );
  }

  /// 金额部分的条目
  Widget _amountItem(String name, String amount) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 12),
      child: Row(
        children: [
          Text(
            name,
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
            style: TextStyle(
                color: EsColors.Content,
                fontSize: EsSizes.SM,
                fontWeight: EsFontWeights.Normal),
          ),
          Expanded(
            child: Text(
              amount,
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              textAlign: TextAlign.end,
              style: TextStyle(
                  color: EsColors.TitleSecondary,
                  fontSize: EsSizes.SM,
                  fontWeight: EsFontWeights.Normal),
            ),
          ),
        ],
      ),
    );
  }

  /// 金额展示
  Widget _amount() {
    return Column(
      children: [
        SizedBox(height: 8),
        _amountItem('商品金额', '￥324.22'),
        _amountItem('鲸币抵扣', '-￥324.22'),
        _amountItem('积分优惠', '-￥4.22'),
        _amountItem('配送运费', '+0.00'),
        SizedBox(height: 12),
      ],
    );
  }

  /// 底部
  Widget _bottom() {
    return Container(
      decoration: EsDecoration.BoxShadowDefault,
      child: Column(
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Expanded(
                child: Padding(
                  padding: EdgeInsets.only(left: 12, bottom: 10),
                  child: RichText(
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    text: TextSpan(
                        text: '￥342.22',
                        style: TextStyle(
                            fontSize: EsSizes.XL,
                            color: EsColors.Primary,
                            fontWeight: EsFontWeights.Medium),
                        children: <TextSpan>[
                          TextSpan(
                              text: ' 优惠￥22.00',
                              style: TextStyle(
                                  fontSize: EsSizes.SM,
                                  color: EsColors.ContentSecondary,
                                  fontWeight: EsFontWeights.Normal)),
                        ]),
                  ),
                ),
              ),
              SizedBox(width: 4),
              TextButton(
                  style: TextButton.styleFrom(
                      minimumSize: Size(100, 55),
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.all(Radius.circular(0)),
                      ),
                      backgroundColor: EsColors.Primary),
                  onPressed: () {
                    print('提交订单');

                    YpBottomSheet.showPayWay(context, (index, text, {info}) {
                      print(index);
                      print(text);
                      Future.delayed(Duration(milliseconds: 300), () {
                        Get.offAndToNamed(RouteConfig.paySuccess);
                      });
                    });
                  },
                  child: Text(
                    '提交订单',
                    style: TextStyle(
                        fontSize: EsSizes.LG,
                        color: EsColors.White,
                        fontWeight: EsFontWeights.Normal),
                  ))
            ],
          ),
          SizedBox(height: MediaQuery.of(context).padding.bottom)
        ],
      ),
    );
  }
}
